<script setup>
import HorizontalBar from '../components/HorizontalBar.vue';
import MapChart from '../components/MapChart.vue';
import RadarBar from '../components/RadarBar.vue';
import Relation from '../components/Relation.vue';
import RingBar from '../components/RingBar.vue';
import TotalData from '../components/TotalData.vue';
import VerticalBar from '../components/VerticalBar.vue';
import WordCloud from '../components/WordCloud.vue';

import { getVisualization, getVisualizationElse } from '../api/api';

import { ref } from 'vue';
let data = ref(null);
let flag = true;
const loadData = async () => {
  if (flag) {
    const res = await getVisualization();
    if (res.code === 0) {
      data.value = res.data;
    }
  } else {
    const res = await getVisualizationElse();
    if (res.code === 0) {
      data.value = res.data;
    }
  }
};
loadData();
setInterval(() => {
  flag = !flag;
  loadData();
}, 3000);
console.log('APP', data);
</script>

<template>
  <div
    class="bg-[url('assets/bg.jpg')] bg-cover bg-center h-screen p-3 flex overflow-hidden text-white"
    v-if="data"
  >
    <!-- 左 -->
    <div class="flex-1 mr-3 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData" />
      <!-- 关系图 -->
      <Relation class="h-1/3" :data="data.relationData" />
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-3 flex flex-col">
      <!-- 数据总览 -->
      <TotalData
        class="bg-opacity-50 bg-slate-800 p-3"
        :data="data.totalData"
      />
      <!-- 数据总览 -->
      <MapChart
        class="bg-opacity-50 bg-slate-800 p-3 mt-3 flex-1"
        :data="data.mapData"
      />
    </div>
    <!-- 右 -->
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData" />
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-border pb-4" :data="data.ringData" />
      <!-- 文档云图 -->
      <WordCloud class="h-1/3" :data="data.abnormalData" />
    </div>
  </div>
</template>

<style scoped></style>
